<template>
  <div style="background:#f2f2f2;padding-bottom: 50px;">
    <!--  弹出层 -->
    <van-popup v-model="show" position="bottom" closeable close-icon="close">
      
      <div class="content">
        <img :src="product.masterImg" alt="">
        <p 
          v-for="(norm,index) in norms"
          :key="index"
        >
          <span>{{norm.name}}:</span>
          <span 
          v-for="(attr,index) in norm.attrList"
          :key="index"
          class="norm"
          ref='norm'
          @click="check($event)"
          >
          {{attr.name}}
          </span>
        </p>
        <p>
          数量：<van-stepper v-model="value" :max="productStock"/><span class="kc">库存({{productStock}})</span>
        </p>
      </div>
      <van-button round class="showButton" v-if="showmeth=='加入购物车'" @click="addToCart">加入购物车</van-button>
      <van-button round class="showButton" v-if="showmeth=='立即购买'" style="background: linear-gradient(to right,#ff6034,#ee0a24);">立即购买</van-button>
      
    </van-popup>


    <!-- 商品轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="banner in banners"
        :key="banner"
      >
        <img :src="banner" alt="">
      </van-swipe-item>
    </van-swipe>

    <!-- 标题 -->
    <div class="titles">
      <p class="name1">{{product.name1}}</p>
      <p class="name2">{{product.name2}}</p>
      <p class="price">￥{{product.mallPcPrice}}</p>
    </div>
  
    <div v-html="description" class="description"></div>
    <!-- detail底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车"  @click="goToCart"  :badge="$store.state.cart.length" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="showPopup('加入购物车')"/>
      <van-goods-action-button type="danger" text="立即购买" @click="showPopup('立即购买')"/>
    </van-goods-action>
  </div>
</template>

<script>
import { findDetail } from '@/api/Detail'
import { Toast } from 'vant';
import Vue from 'vue';
Vue.use(Toast);

export default {
  name: 'home',
  data () {
    return {
      productStock:1,
      value: 1,
      show: false,
      showmeth:'',
      banners: [],
      description: '',
      grids: [{ icon: '&#xe699;', text: '分类查询', color: '#fe3835' },
        { icon: '&#xe69b;', text: '购物车', color: '#ff6a0c' },
        { icon: '&#xe837;', text: '乐码通道', color: '#7643ec' },
        { icon: '&#xe837;', text: '乐码通', color: '#7643ec' },
        { icon: '&#xe837;', text: '乐码', color: '#7643ec' },
        { icon: '&#xe7dc;', text: '乐码社区', color: '#75ca79' }],
      floors: [],
      product:[],
      norms:[],
      normschecked:''
    }
  },
  created () {
    findDetail(this.$route.query.id)
      .then(data => {
        this.productStock = data.goods.productStock
        this.description = data.product.description
        this.product = data.product
        this.norms = data.norms
        this.banners = data.productLeadPicList
        console.log('数据', data)
      })
      .catch(() => {})
  },
  methods: {
    showPopup(meth) {
      this.show = true
      this.showmeth = meth
    },
    addToCart () {
      const { id, name1, malMobilePrice, masterImg } = this.product
      const currentProduct = {
        id,
        name1,
        malMobilePrice,
        masterImg,
        norm:this.normschecked,
        amount:this.value
      }
      this.show = false
      this.value = 1
      Toast('添加购物车成功');
      console.log(this.$store.state.cart.length)
      this.$store.commit('addToCart', currentProduct)
    },
    check(e) {
      this.normschecked=e.target.innerHTML
      console.log(this.normschecked)
      this.checked()
      e.target.style.borderColor='orange'
    },
    checked(){
        this.$refs.norm.map((norm)=>{
          norm.style.borderColor='#ccc'
        })
    },
    goToDetail(id){
          this.$router.push('/detail?id='+id)
          console.log(1)
    },
    goToCart () {
      // console.log('跳转到详情页的ID为:' + id)
      this.$router.push('/cart')
    }
  }
}
</script>


<style lang='scss' scoped>
  .my-swipe .van-swipe-item {
    height: 375px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img{
      height: 375px;
      width: 100%;
      padding-bottom: 50px;
    }
  }
  .van-swipe__indicator{
    width: 8px!important;
    height: 8px!important;
    background-color: black!important;
  }
  p{
    padding: 0 9px;
  }
  .titles{
    background: white;
    margin: 5px;
    border-radius: 5px;
    .name1{
    font-size: 14px;
    }
    .name2{
      font-size: 12px;
      color: #f15353;
    }
    .price{
      font-size: 24px;
      color: #f15353;
      margin :10px 0;
    }
  }
  .van-popup{
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    img{
      height: 100px;
      margin: 10px;
      border-radius: 9px;
    }
    .showButton{
        color: #fff;
        font-size: 20px;
        min-height: 44px;
        margin: 0 10%;
        width: 80%;
        background: linear-gradient(to right,#ffd01e,#ff8917);
    }
    .content{
      p{
      display: flex;
      align-items: center;
      min-height: 50px;
      border-bottom: 1px solid #ccc;
      flex-wrap: wrap;
      .norm{
        display: inline-block;
        border: 1px solid #ccc;
        background: #f2f2f2;
        padding: 5px;
        border-radius: 5px;
        margin: 0 4px;
      }
      .kc{
        font-size: 12px;
        color:#999;
      }
      }
    }
  }
  /deep/ .description{
      img{
        width: 375px;
      }
    }
  
</style>